<template>
	<view class="main_con" :style="{height:height+'px'}">
		<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;" @click="toback">
			<u-icon name="arrow-left" color="#fff" label="小区门禁" labelColor="#fff" space="6">
			</u-icon>
		</view>
		<view class="u-flex u-row-between" style="color:#fff;padding:20rpx;">
			<view>
				<view class="dis_inl_blo va_m">
					<u-avatar :src="users.avatar" size="40"></u-avatar>
				</view>
				<text class="va_m" style="font-size: 32rpx;font-weight: bold;margin-left:15rpx;">{{users.username}}</text>
			</view>
			<view>龍舟一号院大门门禁</view>
		</view>
		<view class="key_con">
			<!-- <image :src="keyimg" :class="isactive ? 'active' : ''" mode="aspectFill" @click="toclick"></image> -->
			<view class="spinner-box">
				<view class="circle-border" v-if="isactive">
					<view class="circle-core">
						
					</view>
				</view>
				<view class="imag_con">
					<view v-if="isactive" class="circle"></view>
					<view v-if="isactive" class="circle"></view>
					<view v-if="isactive" class="circle"></view>
				</view>
				<image :src="keyimg" mode="aspectFill"></image>
			</view>
		</view>
		<view class="bottom_btn" @click="toclick">
			一键开锁
		</view>
		<view class="bottom_con" @click="toopendoorlist">点击查看开门记录</view>
	</view>
</template>

<script>
	export default {
		
		data () {
			return {
				height:0,
				users:{
					avatar:'https://resourse.cnlhjt.com/upload/20220825/9fcd7669f37b921409d34469b189f623.png',
					username:'张三'
				},
				keyimg:'https://resourse.cnlhjt.com/upload/20220928/c8d686e8a8e49cf9357648aa7a0b3d79.png',
				isactive:false
			}
		},
		mounted() {
			this.systemInfo();
		},
		onLoad() {
			
		},
		methods:{
		
			systemInfo(){
				var that=this;
				uni.getSystemInfo({
					success(res) {
						// console.log(res);
						that.height=res.screenHeight
					}
				})
			},
			// todownkey(){
			// 	this.isactive=true
			// },
			toclick(){
				var that=this;
				this.isactive=true;
				that.keyimg='https://resourse.cnlhjt.com/upload/20220929/dc28f6f72f0cfd58be5ffe6dcd714fd4.gif';
				setTimeout(function(){
					that.isactive=false;
					that.keyimg='https://resourse.cnlhjt.com/upload/20220928/8981acfd3bbc25a73756ada4c155e624.png';
				},3000)
			},
			toback(){
				uni.navigateBack()
			},
			toopendoorlist(){
				uni.navigateTo({
					url:'./openDoorList'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main_con{
		background-image: url('https://resourse.cnlhjt.com/upload/20220928/3121e012d1055175ac122b69c9bdd0e0.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.key_con{
		text-align: center;
		image{
			margin-top:60rpx;
			width:340rpx;
			height:340rpx;
		}
	}
	.bottom_con{
		position: fixed;
		bottom:40rpx;
		width:100%;
		color:#00828A;
		text-align: center;
	}
	.bottom_btn{
		position: fixed;
		top:1050rpx;
		left:10%;
		width:80%;
		height:100rpx;
		line-height: 100rpx;
		color:#00828A;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		border-radius: 50rpx;
	}
	// .active{
	// 	-webkit-animation: scale 1.5s steps(30) infinite;
	// 	animation: scale 1.5s steps(30) infinite;
	// }
	//  @keyframes scale {
	// 	0% {
	// 		-webkit-transform: scale(1);
	// 		transform: scale(1);
	// 	}
	// 	50%{
	// 		-webkit-transform: scale(0.9);
	// 		transform: scale(0.9);
	// 	}
	// 	100% {
	// 		-webkit-transform: scale(1);
	// 		transform: scale(1);
	// 	}
	// }
	
	.spinner-box{
		position: relative;
		width: 100%;
		height: 340rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		.imag_con{
			position: absolute;
			left:50%;
			top:60rpx;
			width:340rpx;
			height:340rpx;
			border-radius: 50%;
			transform: translateX(-50%);
			background-color: #45a3a9;
			display:flex;
			justify-content:center;
			align-items:center;
		}
		image{
			position: absolute;
			left:50%;
			top:0;
			border-radius: 50%;
			transform: translateX(-50%);
		}
	}
	.circle-border {
		position: absolute;
		left:27%;
		top:58rpx;
		width: 185px;
		height: 185px;
		padding: 3px;
		border-radius: 50%;
		background: transparent;
		// background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
		background: linear-gradient(0deg, rgba(255,255,255,0.1) 33%, rgba(255,255,255,1) 100%);
		animation: spin .8s linear 0s infinite;
	}
	.circle-core {
	    width: 100%;
	    height: 100%;
	    background-color: transparent;
	    border-radius: 50%;
	}
	@keyframes spin {  from {    transform: rotate(0);  }  to{    transform: rotate(359deg);  }}
	
	.circle{
	      position:absolute;
	      width:1px;
	      height:1px;
	      border-radius:50%;
	      background-color:rgba(255, 255, 255, 0.5);
	  }
	
	  .circle:nth-child(1){
	     animation:anim 3s linear infinite;
	  }
	  .circle:nth-child(2){
	     animation:anim 3s linear 0.8s infinite;
	  }
	  @keyframes anim{
	        from  {  opacity:1;  transform:scale(0);  }
	        to    {  opacity:0;  transform:scale(200);  }
	  
	    }
</style>